<template>
  <el-form class="dynamic-form"
    :inline="formConfig.inline"
    :label-position="formConfig.labelPosition"
    :label-width="formConfig.labelWidth"
    :size='formConfig.size'
    :status-icon="formConfig.statusIcon">
     <el-form-item v-model="formObj" ref="child" :label="item.label" v-for="item in sendData.formItemList" :key="item.key" :prop="item.key">
         <el-input size="medium"
            v-if="item.type==='input'"  v-model='item.text'
            v-bind="$attrs" v-on="$listeners" v-on:input ="childClick"
            :type="item.subtype"
            :placeholder="item.placeholder"
            :disabled="item.disable"
            :readonly="item.readonly"
            :autosize="item.autosize">{{item.text}}</el-input>

          <el-button type="primary"
            v-if="item.type==='button' && item.value==='search'" @click = "search"
            v-bind="$attrs" v-on="$listeners"
            :icon="item.icon"
            :type="item.subtype"
            :placeholder="item.placeholder"
            :disabled="item.disable"
            :readonly="item.readonly"
            :autosize="item.autosize">{{item.text}}</el-button>

          <el-button type="primary"
            v-if="item.type==='button' && item.value==='add'" @click = "add"
            v-bind="$attrs" v-on="$listeners"
            :icon="item.icon"
            :type="item.subtype"
            :placeholder="item.placeholder"
            :disabled="item.disable"
            :readonly="item.readonly"
            :autosize="item.autosize">{{item.text}}</el-button>

           <el-button type="primary"
            v-if="item.type==='button' && item.value==='update'" @click = "update"
            v-bind="$attrs" v-on="$listeners"
            :icon="item.icon"
            :type="item.subtype"
            :placeholder="item.placeholder"
            :disabled="item.disable"
            :readonly="item.readonly"
            :autosize="item.autosize">{{item.text}}</el-button>

           <el-button type="primary"
             v-if="item.type==='button' && item.value==='deleteAll'" @click = "deleteAll"
             v-bind="$attrs" v-on="$listeners"
             :icon="item.icon"
             :type="item.subtype"
             :placeholder="item.placeholder"
             :disabled="item.disable"
             :readonly="item.readonly"
             :autosize="item.autosize">{{item.text}}</el-button>

          <el-select
            v-else-if="item.type==='select'"
            v-bind="$attrs" v-on="$listeners"
            :multiple="item.multiple"
            :disabled="item.disabled"
            :multiple-limit="item.multipleLimit">
             <el-option
               v-for="o in item.options"
               :key="o.value"
               :label="o.label"
               :value="o.value"
               :disabled="o.disabled">
               </el-option>
           </el-select>
           <br>
        <!--<span v-else>未知控件类型</span>-->
      </el-form-item>
      <slot/>
  </el-form>
</template>
<script>
  import Vue from 'vue'
   import Element from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import 'element-ui/lib/index.js'
   Vue.use(Element)
  import Bus from './bus.js'

  export default {
   name: 'dynamic-form',
    props: [
      'sendData',
    ],
   data: function (){
      return {
        //表格数据
        formConfig: {
          inline: true,
          labelPosition: 'right',
          labelWidth: '',
          size: 'small',
          statusIcon: true
        },
        searchList:[

        ],
        templateId:"",
        formObj :{

        }

     }
    },
   methods: {
      search(){
        this.searchList = []
        this.templateId = this.sendData.templateId
        this.sendData.formItemList.forEach((item, index) => {
            if (item.type==='input'){
              let cope = {
                i: index+1,
                attr:item.key,
                attrCn:item.label,
                val:item.text
              }
              this.searchList.push(cope)
            }
        })
        Bus.$emit('searchTable', this.searchList);
      },
      add(){
         this.$router.push({name:"addContent", params:{templateId: this.sendData.templateId}})
       },
      update(){

      },
      deleteAll(){

      },
      childClick () {
        // console.log("监听到input事件变化:" +JSON.stringify(this.sendData.formItemList));
        this.$emit('inputHandle', this.currentValue)
      }
   },
   mounted() {
   }
  }
</script>
